<template>
  <div v-if="page!=null">
    <h1 style="text-align:center">故事会</h1>
    <hr/>
    <van-loading v-if="isLoading" color="#1989fa" type="spinner"/>
    <div style="display: flex;flex-wrap: wrap;justify-content: space-around;">
      <ImgInfo v-for="item in page.records" :key="item.id"
               :imgUrl="'http://localhost:8000/ss/imgs/'+item.img"
               :title="item.title"
               @clickImg="showBig"
      >
        <!--          #tool使用插槽-->
        <template #tool>
          <router-link :to="{ name: 'detailTxt', params: { id: item.id } }">查看</router-link>
          <a href="#" @click.prevent="toDetail(item.id)">查看</a>
          <button>收藏</button>
        </template>
      </ImgInfo>
    </div>
    <div style="text-align: center;">
        <span v-for="i in page.pages" :key="i" style="margin:10px" @click="loadData(i)">
            {{ i }}
        </span>
    </div>
  </div>
</template>
<script setup>
import ImgInfo from '../components/ImgInfo.vue'
import {onMounted, ref, watch} from 'vue'
import axios from '../api/index.js'
import {showImagePreview} from 'vant';
import {useRouter} from 'vue-router'

let router = useRouter();
let page = ref(null);

let isLoading = ref(true);
watch(page, (newvalue, oldvalue) => {
      if (page.value) {
        isLoading.value = false;
      }
    }
    , {
      deep: true//对象里面的属性变化也纳入监视范围
      , immediate: true//页面加载时候就开始触发了
    })

function toDetail(id) {
  router.push({
    name: 'detailTxt',
    params: {
      id: id
    }
  })
  //   router.push({
  //     path:'/detail/txt',
  //     query:{
  //       id:id
  //     }
  //   })
}

function showBig(url) {
  showImagePreview({images: [url], closeable: true});
}

onMounted(() => {
  loadData(1)
})

function loadData(pageNum) {
  isLoading.value = true;
  axios.get(`/creation/list?pageNum=${pageNum}&pageSize=2`)
      .then(res => {
        page.value = res.data.data;
        //isLoading.value=false;
      })
}


</script>

<style>

</style>